<!doctype html>
<html lang="en">
<head>

<?php include './inc/css.html'; ?>
<script>

</script>
<style type="text/css">

.footer{
  z-index: -1;/*否则会覆盖到全屏的视频上面*/
}
</style>

</head>
<body>
<div class="floaticon top ion-android-arrow-up"></div>
<!-- <div class="floaticon pageback ion-android-arrow-back"></div> -->
<?php include './inc/header.html'; ?>
<div class="line1"></div>

<div class="wrap animated fadeIn" id="course_detail">


<div class="coursepanel">

<div class="section limit-width">

  <div class="sectionheader tc">
      <div class="sectiontitle">课程标题</div>
      <div class="sectionsubtitle">课程摘要课程摘要课程摘要课程摘要</div>
      <a href="javascript:void(0);" class="more lh4 tc" data-posturl="/index.php/WebApp/Courses/courseCollection" data-favtype="courseId" data-id="<?php $courseId ?>">
        <span  class="tran3 ion-ios-heart-outline fav"> 收藏课程</span>
        <span  class="tran3 ion-ios-heart fav dn"> 取消收藏课程</span>
      </a>
  </div>

  <div class="line1"></div>

  <div class=" text-info _text_secondary">
      <p>
         课程介绍，课程介绍，课程介绍， 
         课程介绍，课程介绍，课程介绍， 
         课程介绍，课程介绍，课程介绍， 
         课程介绍，课程介绍，课程介绍， 
         课程介绍，课程介绍，课程介绍， 
         课程介绍，课程介绍，课程介绍， 
         课程介绍，课程介绍，课程介绍， 
         课程介绍，课程介绍，课程介绍， 
      </p>

  </div>
</div>


<!-- 以上是课程内容 -->



<div class="section clearfix limit-width">
    <div class="row list">
        <div class="col-xs-12">
            
            <div id="chapterlist" class="swiper-container">
                <div class="swiper-wrapper">
                    <?php for ($i=1;$i<51;$i++) { ?>
                       <div class="swiper-slide">
                        <a class="section-item tran3 tc" href="./course_detail.php?i=<?php echo $i; ?>">
                            <div class="item-img _bg_light" style="background-image:url(./../assets/img/course<?php echo ($i%3)+1; ?>.jpg)">
                            </div>
                            <div class="item-caption op6">
                              <p class="caption-title">章节<?php echo $i; ?>标题</p>
                              <p class="caption-subtitle oneline">章节描述章节描述章节描述章节描述章节描述章节描述</p>
                            </div>
                        </a>
                       </div>
                    <?php } ?>
                </div>
                <!-- 修改箭头颜色示范 -->
                <!--
                <div class="swiper-button-prev swiper-button-black"> &nbsp;</div> 
                <div class="swiper-button-next swiper-button-black"> &nbsp;</div>
                -->
                <div class="swiper-scrollbar"></div>
                <div class="swiper-pagination swiper-pagination-fraction _text_secondary"></div>
            </div>

        </div>
    </div>
</div>

</div>


<!-- 以上是章节列表 -->

<div class="tc" > <span class=" lh4 _bg_light _text_primary courseshowhide ion-chevron-up tran3" title="隐藏课程信息" ></span></div>

<?php if($_GET['i']%2==0){ ?>
    <div class="light-background" >

        <div class="section clearfix limit-width">

          <div class="sectionheader tc">
              <div class="sectiontitle">章节标题</div>
              <div class="sectionsubtitle">章节摘要章节摘要章节摘要章节摘要</div>
              <a href="javascript:void(0);" class="more lh4 tc" data-posturl="/index.php/WebApp/Courses/sectionCollection" data-favtype="sectionId" data-id="<?php $sectionId ?>">
                 <span class="tran3 fav ion-ios-heart-outline dn"> 收藏章节</span>
                 <span class="tran3 fav ion-ios-heart"> 取消收藏章节</span>
              </a>
          </div>

          <div class="line1"></div>



          <div class="row ">
              <div class="col-xs-12">

                  <video id="video2025hr" class="video-js vjs-default-skin tran3" controls preload="auto" 
                      poster="../assets/img/patterns/video.png"
                      data-setup="{}">
                      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                      <!--
                      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
                      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
                      -->
                  </video>

                  <!--<iframe  class="dn"  id="frame-2025hr"  src='http://player.youku.com/embed/XMzE2MzY5OTQ4MA==' frameborder=0 'allowfullscreen'></iframe>
                  <iframe  class="dn"  id="frame-2025hr"  src="https://v.qq.com/iframe/player.html?vid=a05189oc6wj&tiny=0&auto=0" frameborder="0"  allowfullscreen></iframe> -->

              </div>
          </div> 

        </div>
    </div>

    <div class="line1"></div>
    <div class="section limit-width">
      <div class=" text-info _text_secondary">
          <p>
             视频章节介绍（如果有的话），视频章节介绍（如果有的话），视频章节介绍（如果有的话）， 
             视频章节介绍（如果有的话），视频章节介绍（如果有的话），视频章节介绍（如果有的话）， 
             视频章节介绍（如果有的话），视频章节介绍（如果有的话），视频章节介绍（如果有的话）， 
             视频章节介绍（如果有的话），视频章节介绍（如果有的话），视频章节介绍（如果有的话）， 
             视频章节介绍（如果有的话），视频章节介绍（如果有的话），视频章节介绍（如果有的话）， 
             视频章节介绍（如果有的话），视频章节介绍（如果有的话），视频章节介绍（如果有的话）， 
             视频章节介绍（如果有的话），视频章节介绍（如果有的话），视频章节介绍（如果有的话）， 
             视频章节介绍（如果有的话），视频章节介绍（如果有的话），视频章节介绍（如果有的话）， 
          </p>

      </div>
    </div>


<!-- 以上是视频章节 -->


<?php }elseif($_GET['i']%2==1) { ?>
    <div class="light-background" >
        <div class="section clearfix limit-width">

          <div class="sectionheader tc">
              <div class="sectiontitle">章节标题</div>
              <div class="sectionsubtitle">章节摘要章节摘要章节摘要章节摘要</div>
              <a href="javascript:void(0);" class="more lh4 tc" data-posturl="/index.php/WebApp/Courses/sectionCollection" data-favtype="sectionId" data-id="<?php $sectionId ?>">
                 <span class="tran3 fav ion-ios-heart-outline dn"> 收藏章节</span>
                 <span class="tran3 fav ion-ios-heart"> 取消收藏章节</span>
              </a>
          </div>

          <div class="line1"></div>

          <div class=" text-info _text_secondary">
              <p>
                 富文本课程详细，富文本课程详细，富文本课程详细， 
                 富文本课程详细，富文本课程详细，富文本课程详细， 
                 富文本课程详细，富文本课程详细，富文本课程详细， 
                 富文本课程详细，富文本课程详细，富文本课程详细， 
              </p>
              <img src="./../assets/img/course.jpg">
                  <p>
                 富文本课程详细，富文本课程详细，富文本课程详细， 
                 富文本课程详细，富文本课程详细，富文本课程详细， 
                 富文本课程详细，富文本课程详细，富文本课程详细， 
                 富文本课程详细，富文本课程详细，富文本课程详细， 
              </p>
              <img src="./../assets/img/course.jpg">
          </div>
        </div>
    </div>
            
<?php } ?>

<!-- 以上是富文本章节 -->
<div class="line1"></div>
</div>

<?php include './inc/footer.html'; ?>
</body>

<?php include './inc/js.html'; ?>
<script type="text/javascript">


$(document).ready(function(){

  $('.courseshowhide').on('click',function(){

    var target = $('.coursepanel');
    var that = $(this);

    if(that.hasClass('ion-chevron-up')){
      target.slideUp(200);
      that.removeClass('ion-chevron-up').addClass('ion-chevron-down').attr('title','展开课程信息');

    }else{

      target.slideDown(200);
      that.removeClass('ion-chevron-down').addClass('ion-chevron-up').attr('title','隐藏课程信息')

    }


  })



  // 初始化专家轮播图
  var chapterlistSwiper = new Swiper ('#chapterlist', {
    
        initialSlide :"<?php echo $_GET['i']-1;  ?>",
        autoplay:3000,
        slidesPerView :3.5,
        spaceBetween : 10,

        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // },

        scrollbar: {
          el: '.swiper-scrollbar',
          draggable: true,
          snapOnRelease: false,
        },
        // effect : 'coverflow',
        // coverflowEffect: {
        //   rotate: 30,
        //   stretch: 10,
        //   depth: 60,
        //   modifier: 2,
        //   slideShadows : true
        // },
        // 
        pagination: {
              el: '.swiper-pagination',
              type:'fraction',
              clickable: true,
        },

    } ) ;

  // chapterlistSwiper.slideTo("<?php echo $_GET['i']-1?$_GET['i']-1:0; ?>", 1000, false);



try{
  videojs.options.flash.swf = "https://cdn.bootcss.com/video.js/6.6.2/video-js.swf";

  var player = videojs('video2025hr');

  videojs("video2025hr").ready(function () {
       var player = this;
       // player.play();
  });

}catch(e){


}

/*
  player.play();//播放
  player.pause();//暂停
  var whereYouAt = player.currentTime();//获取播放进度：
  player.currentTime(120);//设置播放进度：
  var howLongIsThis = player.duration();//视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效
  var whatHasBeenBuffered = player.buffered();//缓冲，就是返回下载了多少
  var howMuchIsDownloaded = player.bufferedPercent();//百分比的缓冲
  var howLoudIsIt = player.volume();//获取声音大小
  player.volume(0.5);//设置声音大小（0-1之间）
  var howWideIsIt = player.width();//取得视频的宽度
  player.width(640);//设置宽度
  var howTallIsIt = player.height();//获取高度
  player.height(480);//设置高度：
  player.size(640,480);//一步到位的设置大小：
  player.enterFullScreen();//全屏

  //自定义事件
  var myFunc = function(){
  // Do something when the event is fired
  };
  //添加事件
  player.addEvent("eventName", myFunc);
  //删除事件
  player.removeEvent("eventName", myFunc);

*/
  // initfooter();



})

</script>
</html>